<template>
  <div class="home-page">
    <!-- 轮播图区域 -->
    <div class="carousel-section">
      <a-carousel autoplay :dots="true" effect="fade">
        <div v-for="(item, index) in featuredNews" :key="index" class="carousel-item">
          <div class="carousel-content">
            <div class="carousel-image-container">
              <div class="carousel-image-placeholder">
                <img :src="`/api/files/${item.coverImage}`" :alt="item.title" class="carousel-image" />
              </div>
            </div>
            <div class="carousel-caption">
              <div class="caption-content">
                <h3 class="carousel-title">{{ item.title }}</h3>
                <p class="carousel-summary">{{ item.summary }}</p>
                <a-button type="primary" size="large" @click="$router.push(`/news/${item.id}`)">
                  <read-outlined />
                  阅读全文
                </a-button>
              </div>
            </div>
          </div>
        </div>
      </a-carousel>
    </div>

    <!-- 新闻分类区域 -->
    <div class="news-sections">
      <a-row :gutter="[24, 24]">
        <!-- 学校要闻 -->
        <a-col :xs="24" :lg="12">
          <div class="news-section">
            <div class="section-header">
              <h2 class="section-title">
                <flag-outlined class="section-icon" />
                学校要闻
              </h2>
              <router-link to="/category/important" class="view-more">
                查看更多 <right-outlined />
              </router-link>
            </div>
            <div class="news-list">
              <news-card 
                v-for="item in importantNews" 
                :key="item.id" 
                :news="item" 
              />
            </div>
          </div>
        </a-col>

        <!-- 学术动态 -->
        <a-col :xs="24" :lg="12">
          <div class="news-section">
            <div class="section-header">
              <h2 class="section-title">
                <book-outlined class="section-icon" />
                学术动态
              </h2>
              <router-link to="/category/academic" class="view-more">
                查看更多 <right-outlined />
              </router-link>
            </div>
            <div class="news-list">
              <news-card 
                v-for="item in academicNews" 
                :key="item.id" 
                :news="item" 
              />
            </div>
          </div>
        </a-col>

        <!-- 综合新闻 -->
        <a-col :xs="24" :lg="12">
          <div class="news-section">
            <div class="section-header">
              <h2 class="section-title">
                <global-outlined class="section-icon" />
                综合新闻
              </h2>
              <router-link to="/category/general" class="view-more">
                查看更多 <right-outlined />
              </router-link>
            </div>
            <div class="news-list">
              <news-card 
                v-for="item in generalNews" 
                :key="item.id" 
                :news="item" 
              />
            </div>
          </div>
        </a-col>

        <!-- 通知公告 -->
        <a-col :xs="24" :lg="12">
          <div class="news-section">
            <div class="section-header">
              <h2 class="section-title">
                <notification-outlined class="section-icon" />
                通知公告
              </h2>
              <router-link to="/category/notice" class="view-more">
                查看更多 <right-outlined />
              </router-link>
            </div>
            <div class="notice-list">
              <a-list :data-source="noticeNews" size="small">
                <template #renderItem="{ item }">
                  <a-list-item class="notice-item">
                    <div class="notice-content">
                      <router-link :to="`/news/${item.id}`" class="notice-title">
                        <file-text-outlined class="notice-icon" />
                        {{ item.title }}
                      </router-link>
                      <span class="notice-date">{{ formatDate(item.publishTime) }}</span>
                    </div>
                  </a-list-item>
                </template>
              </a-list>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { 
  ReadOutlined, 
  FlagOutlined, 
  BookOutlined, 
  GlobalOutlined, 
  NotificationOutlined, 
  RightOutlined, 
  FileTextOutlined 
} from '@ant-design/icons-vue'
import NewsCard from '../../components/NewsCard.vue'
import dayjs from 'dayjs'
import request from '@/utils/request' // 导入配置好的 axios 实例

// 格式化日期
const formatDate = (date) => {
  return dayjs(date).format('YYYY-MM-DD')
}

// 模拟数据 - 实际项目中应该从API获取
const featuredNews = ref([])

const importantNews = ref([])
const academicNews = ref([])
const generalNews = ref([])
const noticeNews = ref([])


// 获取新闻列表
const fetchFeatureNewsList = async () => {
  try {
    // 实际项目中应该调用API
    const response = await request.get('/news/frontend/carousel')

    if (response.code === 200) {
      featuredNews.value = response.data
    } else {
      message.error('获取轮播新闻失败')
    }
  } catch (error) {
    message.error('获取轮播新闻失败')
    console.error('获取轮播新闻失败:', error)
  }
}

// 获取新闻列表
const fetchAcademicNewsList = async () => {
  try {
    // 实际项目中应该调用API
    const response = await request.post('/news/frontend/list/1/5', {
        categoryId: 2
      })

    if (response.code === 200) {
      academicNews.value = response.data.records
    } else {
      message.error('获取新闻列表失败')
    }
  } catch (error) {
    message.error('获取新闻列表失败，请稍后再试')
    console.error('获取新闻列表失败:', error)
  } finally {
  }
}

// 获取新闻列表
const fetchGeneralNewsList = async () => {
  try {
    // 实际项目中应该调用API
    const response = await request.post('/news/frontend/list/1/5', {
        categoryId: 3
      })

    if (response.code === 200) {
      generalNews.value = response.data.records
    } else {
      message.error('获取新闻列表失败')
    }
  } catch (error) {
    message.error('获取新闻列表失败，请稍后再试')
    console.error('获取新闻列表失败:', error)
  } finally {
  }
}

// 获取新闻列表
const fetchNoticeNewsList = async () => {
  try {
    // 实际项目中应该调用API
    const response = await request.post('/news/frontend/list/1/5', {
        categoryId: 4
      })

    if (response.code === 200) {
      noticeNews.value = response.data.records
    } else {
      message.error('获取新闻列表失败')
    }
  } catch (error) {
    message.error('获取新闻列表失败，请稍后再试')
    console.error('获取新闻列表失败:', error)
  } finally {
  }
}

// 获取新闻列表
const fetchImportantNewsList = async () => {
  try {
    // 实际项目中应该调用API
    const response = await request.post('/news/frontend/list/1/5', {
        categoryId: 1
      })

    if (response.code === 200) {
      importantNews.value = response.data.records
    } else {
      message.error('获取新闻列表失败')
    }
  } catch (error) {
    message.error('获取新闻列表失败，请稍后再试')
    console.error('获取新闻列表失败:', error)
  } finally {
  }
}

// 模拟获取数据
onMounted(async () => {
  try {
    // 实际项目中应该调用API
    // const response = await axios.get('/api/news/home')
    // const data = response.data
    fetchFeatureNewsList();
    fetchAcademicNewsList();
    fetchGeneralNewsList();
    fetchNoticeNewsList();
    fetchImportantNewsList();
  } catch (error) {
    message.error('获取新闻数据失败，请稍后再试')
    console.error('获取新闻数据失败:', error)
  }
})
</script>

<style scoped>
.home-page {
  padding: 0;
  background-color: #f5f5f5;
}

/* 轮播图样式 */
.carousel-section {
  margin-bottom: 40px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.carousel-item {
  height: 500px;
  position: relative;
  overflow: hidden;
}

.carousel-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.carousel-image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.carousel-image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

.carousel-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
  z-index: 2;
  padding: 60px 40px 40px;
}

.caption-content {
  max-width: 600px;
}

.carousel-title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #fff;
  line-height: 1.3;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.carousel-summary {
  font-size: 18px;
  margin-bottom: 24px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 新闻分类区域样式 */
.news-sections {
  padding: 0 20px 40px;
}

.news-section {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 24px;
  height: 100%;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
}

.news-section:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f2f5;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: #1e3a8a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-icon {
  font-size: 20px;
  color: #3b82f6;
}

.view-more {
  color: #3b82f6;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.3s ease;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
}

.view-more:hover {
  color: #1e40af;
  background-color: #eff6ff;
  border-color: #dbeafe;
  text-decoration: none;
}

/* 通知公告特殊样式 */
.notice-list {
  background-color: #fafafa;
  border-radius: 8px;
  padding: 12px;
}

.notice-item {
  padding: 8px 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

.notice-item:last-child {
  border-bottom: none !important;
}

.notice-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.notice-title {
  color: #374151;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  transition: color 0.3s ease;
}

.notice-title:hover {
  color: #3b82f6;
  text-decoration: none;
}

.notice-icon {
  font-size: 12px;
  color: #9ca3af;
}

.notice-date {
  color: #9ca3af;
  font-size: 12px;
  white-space: nowrap;
  margin-left: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .carousel-item {
    height: 300px;
  }
  
  .carousel-caption {
    padding: 30px 20px 20px;
  }
  
  .carousel-title {
    font-size: 24px;
  }
  
  .carousel-summary {
    font-size: 16px;
  }
  
  .news-sections {
    padding: 0 16px 20px;
  }
  
  .news-section {
    padding: 16px;
  }
  
  .section-title {
    font-size: 18px;
  }
}

.view-more {
  font-size: 14px;
  color: #666;
}

.view-more:hover {
  color: #003366;
}

.news-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

/* 通知公告样式 */
.notice-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.notice-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-date {
  color: #999;
  font-size: 12px;
  margin-left: 10px;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .news-sections {
    grid-template-columns: 1fr;
  }
  
  .carousel-item {
    height: 300px;
    line-height: 300px;
  }
  
  .carousel-caption h3 {
    font-size: 20px;
  }
  
  .carousel-caption p {
    font-size: 14px;
  }
}
</style>